function Enlarge(ele) {

  this.ele = document.querySelector(ele)

  this.show = this.ele.querySelector('.big_imgBox')

  this.mask = this.ele.querySelector('.mask')

  this.enlarge = this.ele.querySelector('.enlarge')

  this.list = this.ele.querySelector('.small_imgBox')

  this.show_width = this.show.clientWidth
  
  this.show_height = this.show.clientHeight
// console.log(this.show_width)
  this.enlarge_width = parseInt(window.getComputedStyle(this.enlarge).width)
  this.enlarge_height = parseInt(window.getComputedStyle(this.enlarge).height)

  this.bg_width = parseInt(window.getComputedStyle(this.enlarge).backgroundSize.split(' ')[0])
  this.bg_height = parseInt(window.getComputedStyle(this.enlarge).backgroundSize.split(' ')[1])

    
  this.init()

}

Enlarge.prototype.init = function () {
    this.setScale()
    this.overOut()
    this.move()
    this.change()
  }

Enlarge.prototype.setScale = function () {

    this.mask_width = this.show_width * this.enlarge_width / this.bg_width
    this.mask_height = this.show_height * this.enlarge_height / this.bg_height
  
    this.mask.style.width = this.mask_width + 'px'
    this.mask.style.height = this.mask_height + 'px'
  
}

Enlarge.prototype.overOut = function () {

    this.show.addEventListener('mouseover', () => {
      this.mask.style.display = 'block'
      this.enlarge.style.display = 'block'
    })
  
    // 绑定移出事件
    this.show.addEventListener('mouseout', () => {
      this.mask.style.display = 'none'
      this.enlarge.style.display = 'none'
    })
  }

  Enlarge.prototype.move = function () {

    this.show.addEventListener('mousemove', e => {

      e = e || window.event


      let x = e.offsetX - this.mask_width / 2
      let y = e.offsetY - this.mask_height / 2
  
      // 边界值判断
      if (x <= 0) x = 0
      if (y <= 0) y = 0
      if (x >= this.show_width - this.mask_width) x = this.show_width - this.mask_width
      if (y >= this.show_height - this.mask_height) y = this.show_height - this.mask_height
  
      // 给 msak 盒子进行 left 和 top 的赋值
      this.mask.style.left = x + 'px'
      this.mask.style.top = y + 'px'
  
      // 根据公式计算出背景图片移动的距离
      const bg_x = this.enlarge_width * x / this.mask_width
      const bg_y = this.enlarge_height * y / this.mask_height
  
      // 赋值给 enlarge 盒子的 background-position 属性
      this.enlarge.style.backgroundPosition = `-${ bg_x }px -${ bg_y }px`
    })
  
  }

  Enlarge.prototype.change = function () {
    // 绑定事件
    this.list.addEventListener('click', e => {
      // 处理事件对象兼容
      e = e || window.event
      // 处理事件目标兼容
      const target = e.target || e.srcElement
  
  
      // 判断点击的是哪一个 img 元素
      if (target.nodeName === 'IMG') {
        // 拿到点击元素的身上的自定义属性
        const show_url = target.getAttribute('show')
        const enlarge_url = target.getAttribute('enlarge')
  
        // 给元素进行赋值
        this.show.firstElementChild.src = show_url
        this.enlarge.style.backgroundImage = `url(${ enlarge_url })`
  
        // 给所有 p 标签取消 active
        for (let i = 0; i < this.list.children.length; i++) {
          this.list.children[i].classList.remove('active')
        }
  
        target.parentElement.classList.add('active')
      }
    })
  }
